{% extends '::base.html.twig' %}
{% block navigation %}
<nav id="navigation">
    
    <a href="{{ path('cesiplastprodBundle_homepage') }}" id="logo"><img src="{{ asset('bundles/cesiplastprod/images/logo.png') }}"/></a>
    
    <ul>
        {% if is_granted('ROLE_USER') %}
        <li><a href="" id="gamesMenuBarOption" class="menuBarOption"></a></li>
        <li><a href="" id="streamsMenuBarOption" class="menuBarOption"></a></li>
        <li><a href="" id="teamsMenuBarOption" class="menuBarOption"></a></li>
        <li><a href="" id="eventsMenuBarOption" class="menuBarOption"></a></li>
        <li><a href="" id="displayDeconnectionMenuLink" class="menuBarOption">{{ app.user.username }}</a></li>
        {# <li><a href="">Modifier votre profil </a> </li>
                <li><a href="{{ path('cesiplastprodBundle_logout') }}"> Se déconnecter </a> </li>#}
        {% else %}
        <li><a href="javascript:void(O)" class="menuBarOption" id="signInMenuBarOption">S'authentifier</a></li>
        {% endif %}
    </ul>
    <div id="connectionMenu">
        <img id="arrowTopRight" src="{{ asset('bundles/cesiplastprod/images/arrow_top_right_deco_menu.png') }}"/>
        <div class="error" style="display: none" id="connectionFormErrorBlock">
            
        </div>
        <form id="connectionForm" action="{{ path('cesiplastprodBundle_login_check') }}" method="post">
            <label for="username">Login:</label>
            <input type="text" id="user_login" autocomplete="off" name="log" {% if last_username is defined %}value="{{ last_username }}"{% endif %} />

            <label for="password">Mot de passe:</label>
            <input type="password" autocomplete="off" id="user_password" name="mdp" />

            <button type="submit" name="login">Connexion</button>
        </form>
        <a id="subscribeLink" href="javascript:void(O)">S'inscrire</a>
		{# inscription #}
		
    </div>
    <div id="deconnectionMenu">
        <img id="arrowTopRight" src="{{ asset('bundles/plastprod/images/arrow_top_right_deco_menu.png') }}"/>
        <a href="javascript:void(0)">Mes jeux</a>
        <a href="javascript:void(0)">Mes teams</a>
        <a href="javascript:void(0)">Mes évènements</a>
        <a href="javascript:void(0)">Mes streamers</a><br>
        <a href="{{ path('cesiplastprodBundle_logout') }}">Se déconnecter</a>
    </div>
        <input id="searchField"/>
</nav>
<script>

function extractUrlParams(){	
	var t = location.search.substring(1).split('&');
	var f = [];
	for (var i=0; i<t.length; i++){
		var x = t[ i ].split('=');
		f[x[0]]=x[1];
	}
	return f;
}
var optionalFieldsDisplayed = false;
$(document).ready(function() {
    $(".opt_infos_trigger").live('click', function() {
        $(".opt_infos").slideToggle();
        if(optionalFieldsDisplayed) {
            $(this).removeClass('opt_infos_trigger_b')
            $(this).addClass('opt_infos_trigger_a');
        } else {
            $(this).removeClass('opt_infos_trigger_a')
            $(this).addClass('opt_infos_trigger_b');
        }
        
        optionalFieldsDisplayed = !optionalFieldsDisplayed;
    });
	var availableSections = ["games", "streams", "teams", "events", "profil"];
    var params = extractUrlParams();

    if (params["cs"] in availableSections) {
		if(params["cs"] < 4) {
			$("#"+availableSections[params["cs"]]+"MenuBarOption").parent().addClass('currentSection');
		} else {
			$("#"+availableSections[params["cs"]]+"SideMenuLink").parent().addClass('currentSideSection');
		}
    }

$.ajax({
    type: 'GET',
    url: "{{ path('cesiplastprodBundle_displaySubscribe') }}",
    async: false,
    success: function(msg) {
		$("div#connectionMenu").append(msg);

		$("a#subscribeLink").click(function(event) {
		    console.log(optionalFieldsDisplayed);
			event.preventDefault();
			$(this).fadeToggle();
			
			if($("div#connectionMenu div#connectionFormErrorBlock").is(':visible')) {
				$("div#connectionMenu div#connectionFormErrorBlock").animate({'opacity': '0'}, 400, 'easeOutCirc');
				
			}
			if(optionalFieldsDisplayed) {
			    var connectionMenuHeight = 453;
			} else {
			    var connectionMenuHeight = 300;
			}
			$("div#connectionMenu form#connectionForm").animate({'opacity': '0'}, 400, 'easeOutCirc', function() {
				$("div#connectionMenu").animate({'height': connectionMenuHeight}, 400, 'easeOutCirc', function() {
					$("div#connectionMenu").css('height', '');
					$("div#connectionMenu form#connectionForm").hide();
					$("div#connectionMenu div#connectionFormErrorBlock").hide();
					if(optionalFieldsDisplayed) {
                        $("div#connectionMenu .opt_infos").show();
                    } else {
                        
                        $("div#connectionMenu .opt_infos").hide();
                    }

					$("div#connectionMenu form#registerForm").show().animate({'opacity': '1'}, 400, 'easeOutCirc');
					$("div#connectionMenu a#displayConnectionFormLink").fadeToggle();
				});
				
			});
		});
		
		$("body").click(function(event) {
			var arrayIds = ['#signInMenuBarOption', '#subscribeLink'];
			
			if($("div#connectionMenu, div#deconnectionMenu").is(':visible') && !$("#"+event.target.id).parents("#connectionMenu").is("#connectionMenu") && event.target.id != 'signInMenuBarOption' && !$(event.target).hasClass("opt_infos_trigger")) {
				$("#signInMenuBarOption").click();
			}
		});
		
		$("div#connectionMenu a#displayConnectionFormLink").click(function(event) {
			event.preventDefault();
			$(this).fadeToggle();
			if($("div#connectionMenu div#registerFormErrorBlock").is(':visible')) {
				$("div#connectionMenu div#registerFormErrorBlock").fadeToggle();
			}
			$("div#connectionMenu form#registerForm").animate({'opacity': '0'}, 400, 'easeOutCirc', function() {
				$("div#connectionMenu").animate({'height': '154'}, 400, 'easeOutCirc', function() {
					setTimeout(function() {
						$("div#connectionMenu").css('height', '');
					}, 400);
					$("div#connectionMenu form#registerForm").hide();
					$("div#connectionMenu div#connectionFormErrorBlock").css('opacity', '1');
					$("div#connectionMenu form#connectionForm").show().animate({'opacity': '1'}, 400, 'easeOutCirc');
					$("div#connectionMenu a#subscribeLink").fadeToggle();
				});
				
			});
		});
	
        $("div#connectionMenu form#connectionForm button[type=submit]").click(function(event) {
            event.preventDefault();
                    
                    
            $("#loading").fadeToggle();
            $.ajax({
                type: 'POST',
                url: "{{ path('cesiplastprodBundle_login_check') }}",
                data: $("div#connectionMenu form#connectionForm").serialize(),
                cache: false,
                success: function(msg) {
                    if(msg != 'OK') {
                            
                                    
                        $("div#connectionMenu div#connectionFormErrorBlock").html(msg);
        
                        if($("div#connectionMenu div#connectionFormErrorBlock").is(":visible")) {
                            
                            $("div#connectionMenu div#connectionFormErrorBlock").toggle();
                        }
                        $("div#connectionMenu div#connectionFormErrorBlock").fadeToggle();
                        $("#loading").fadeToggle();
                           
                    } else {
                        window.location = "{{ path('cesiplastprodBundle_homepage') }}";
                    }
                }
            });
            return false;
        });
        
        $("input[type=text], input[type=password]").attr('autocomplete', 'off');

        $("div#connectionMenu form#registerForm button[type=submit]").click(function(event) {

            event.preventDefault();
            $("#loading").fadeToggle();
            $.ajax({
                type: 'POST',
                url: "{{ path('cesiplastprodBundle_register') }}",
                data: $("div#connectionMenu form").serialize(),
                cache: false,
                success: function(msg) {
                    if(msg != 'OK') {


                        $("div#connectionMenu div#registerFormErrorBlock").html(msg);

                        if($("div#connectionMenu div#registerFormErrorBlock").is(":visible")) {
                            $("div#connectionMenu div#registerFormErrorBlock").toggle();
                        }
                        $("div#connectionMenu div#registerFormErrorBlock").fadeToggle();
                        $("div#connectionMenu #loading").fadeToggle();

                    } else {
                        window.location = "{{ path('cesiplastprodBundle_homepage') }}";
                    }
                }
            });
            return false;
        });
        
        $("div#homepage-subscription-form form#registerForm button[type=submit]").click(function(event) {

            event.preventDefault();
            $("#loading").fadeToggle();
            $.ajax({
                type: 'POST',
                url: "{{ path('cesiplastprodBundle_register') }}",
                data: $("div#homepage-subscription-form form").serialize(),
                cache: false,
                success: function(msg) {
                    if(msg != 'OK') {


                        $("div#homepage-subscription-form div#registerFormErrorBlock").html(msg);

                        if($("div#homepage-subscription-form div#registerFormErrorBlock").is(":visible")) {
                            $("div#homepage-subscription-form div#registerFormErrorBlock").toggle();
                        }
                        $("div#homepage-subscription-form div#registerFormErrorBlock").fadeToggle();
                        $("div#homepage-subscription-form #loading").fadeToggle();

                    } else {
                        window.location = "{{ path('cesiplastprodBundle_homepage') }}";
                    }
                }
            });
            return false;
        });
		
   		
   
	    $("#displayDeconnectionMenuLink").click(function(event) {
	        event.preventDefault();
	        if($("#deconnectionMenu").is(':hidden')) {
	            $("#deconnectionMenu").show();
	            $("#deconnectionMenu").animate({'opacity': '1', 'top': '+=31'}, 400, 'easeOutCirc');
	        } else {
	            $("#deconnectionMenu").animate({'opacity': '0', 'top': '-=31'}, 400, 'easeOutCirc', function() {
	                $("#deconnectionMenu").hide();
	            });
	        }
       
	    });
   
	    $("#signInMenuBarOption").click(function(event) {
	        event.preventDefault();
	        if($("#connectionMenu").is(':hidden')) {
	            $("#connectionMenu").show();
	            $("#connectionMenu").animate({'opacity': '1', 'top': '+=31'}, 400, 'easeOutCirc');
	        } else {
	            $("#connectionMenu").animate({'opacity': '0', 'top': '-=31'}, 400, 'easeOutCirc', function() {
	                $("#connectionMenu").hide();
	            });
	        }
	    });
	}
});
});
</script>

{% endblock %}
